<template>
  <div class="traffic-container">
    <div class="traffic-content">
      <!-- 左侧地图 -->
      <div class="map-section">
        <el-card class="map-card">
          <template #header>
            <div class="card-header">
              <span>实时路况地图</span>
              <div>
                <el-radio-group v-model="mapView" size="small">
                  <el-radio-button :value="'road'">道路视图</el-radio-button>
                  <el-radio-button :value="'earth'">地球模式</el-radio-button>
                  <el-radio-button :value="'satellite'">卫星视图</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="map-wrapper">
            <BMap
              :center="{ lng: 114.305393, lat: 30.593099 }"
              :zoom="11"
              :minZoom="3"
              :mapType="mapTypeMap[mapView]"
              v-bind="mapSetting"
            >
              <BNavigation3d />
              <BCityList />
              <BScale />
            </BMap>
          </div>
        </el-card>
      </div>

      <!-- 右侧分析面板 -->
      <div class="analysis-section">
        <!-- 交通指标分析卡片 -->
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>近24h交通指标分析</span>
            </div>
          </template>
          <TrafficMetricsChart />
        </el-card>

        <!-- 交通指标卡片 -->
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>近24h交通运行指标</span>
            </div>
          </template>
          <TrafficIndicators />
        </el-card>

        <!-- 区域排名卡片 -->
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>实时拥堵排名</span>
              <el-select v-model="rankType" size="small" style="width: 140px">
                <el-option label="区域拥堵排名" value="1" />
                <el-option label="商圈拥堵排名" value="3" />
                <el-option label="行政区划排名" value="4" />
              </el-select>
            </div>
          </template>
          <TrafficRankList :type="rankType" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted, type Ref } from "vue";
import { BMap, MapType, MapProps } from "vue3-baidu-map-gl";
import { getCongestionData } from "@/apis/TrafficIndicators";
import TrafficRankList from "@/views/traffic/components/TrafficRankList.vue";
import TrafficIndicators from "@/views/traffic/components/TrafficIndicators.vue";
import TrafficMetricsChart from "@/views/traffic/components/TrafficMetricsChart.vue";

interface CongestionLevel {
  text: string;
  type: "success" | "warning" | "danger";
}

// 地图类型映射
const mapTypeMap = {
  road: "BMAP_NORMAL_MAP",
  earth: "BMAP_EARTH_MAP",
  satellite: "BMAP_SATELLITE_MAP",
} as const;

const mapView = ref<keyof typeof mapTypeMap>("road");

// 地图基础配置
const mapSetting = ref<MapProps>({
  enableDragging: true,
  enableInertialDragging: true,
  enableScrollWheelZoom: true,
  enableContinuousZoom: true,
  enableResizeOnCenter: true,
  enableDoubleClickZoom: true,
  enableKeyboard: true,
  enablePinchToZoom: true,
  enableAutoResize: true,
  enableTraffic: true,
});

const baiduMap: Ref<any> = ref(null);
const rankType = ref("1");

// 定时器变量声明
let updateTimer: number | null = null;

onUnmounted(() => {
  if (updateTimer) {
    window.clearInterval(updateTimer);
  }
});

// 监听地图类型变化
watch(mapView, (newView) => {
  if (!baiduMap.value) return;
  if (newView === "road") {
    baiduMap.value.setMapStyleV2({
      styleId: "midnight",
    });
  }
});
</script>

<style lang="scss" scoped>
.traffic-container {
  height: 100%;
  display: flex;

  .traffic-content {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100%;

    .map-section {
      width: 65%;
      min-width: 0;

      .map-card {
        height: 99%;
      }
    }

    .analysis-section {
      width: 35%;
      min-width: 0;
      overflow-y: auto;
      padding-right: 4px;
      height: 100%;

      .analysis-card {
        margin-bottom: 20px;
        height: 300px;

        &:last-child {
          margin-bottom: 20px; // 保持底部间距
        }
      }
    }
  }
}

// 卡片通用样式
:deep(.el-card) {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .el-card__header {
    padding: 0;
    border-bottom: 1px solid #ebeef5; // 添加分隔线
  }

  .el-card__body {
    height: calc(100% - 51px); // 调整高度以适应分隔线
    padding: 15px;
    display: flex;
    flex-direction: column;
  }
}

// 地图卡片特殊样式
.map-card {
  :deep(.el-card__body) {
    padding: 0;
    position: relative;
  }

  .map-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    :deep(.bmap-container) {
      height: 100% !important;
      width: 100% !important;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  border-bottom: 1px solid #ebeef5; // 添加分隔线
}

// 添加图表容器样式
.chart-container {
  flex: 1;
  min-height: 0;
}

.ranking-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
</style>
